<template>
  <div class="basic-root">
    <ViewHead></ViewHead>
    <div class="view">
      <el-card class="box-card yj" style="margin: 0px 0px 5px;">
        <h3>{{this.config.user.teamName}}&nbsp;&nbsp;&nbsp; 您好：{{this.config.user.selfname}}</h3>
        <h1>欢迎使用 <span style="color:#409eff">百百堡垒机</span></h1>
      </el-card>
      <el-row :gutter="8">
        <el-col :span="12">
          <el-card class="box-card yj">
            <div>
              <div class="divline" style="vertical-align: middle">
                <i class="el-icon-odometer" style="font-size: 100px; color: #409eff"></i>
              </div>
              <div class="divline" style="font-size: 20px; font-weight: bold; padding-left: 20px">
                <div>百百堡垒机</div>
                <div>已陪伴你 <span style="color: #67c23a">{{days}}</span> 天</div>
              </div>
            </div>
            <div style="font-size: 14px; padding: 1px">
              <span>客户端下载: </span>
              <a target="bank" href="https://gitee.com/baibaiclouds/prober/releases/">Windows版64位</a>
              <a target="bank" href="https://gitee.com/baibaiclouds/prober/releases/" style="margin-left: 20px">Linux版64位</a>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card yj">
            <div style="font-weight: bold">团队详情</div>
            <el-divider></el-divider>
            <div class="total">
              <el-row style="text-align: center">
                <el-col :span="8">
                  <div class="count">
                    <span style="color: #67c23a">{{devCount}}</span> 台
                  </div>
                  <div class="title">总数量</div>
                </el-col>
                <el-col :span="8">
                  <div class="count">
                    <span style="color: #67c23a">{{devOfflineCount}}</span> 台
                  </div>
                  <div class="title">已离线</div>
                </el-col>
                <el-col :span="8">
                  <div class="count">
                    <span style="color: #67c23a">{{userCount}}</span> 人
                  </div>
                  <div class="title">总人数</div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-card v-show="false" class="box-card yj" style="margin-top: 5px">
        <div style="font-weight: bold">告警</div>
        <div class="alarm">
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-col :span="4">
                  <div>
                    <i class="el-icon-odometer" style="font-size: 50px; color: #409eff"></i>
                  </div>
                  <div>网速占用</div>
                </el-col>
                <el-col :span="8">
                  <div class="title">上传网速过高</div>
                  <div class="count">
                    <span style="color: #67c23a">360</span> 台设备
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="title">下载网速过高</div>
                  <div class="count">
                    <span style="color: #67c23a">360</span> 台设备
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row style="margin-top: 10px">
                <el-col :span="4">
                  <div>
                    <i class="el-icon-s-operation" style="font-size: 50px; color: #409eff"></i>
                  </div>
                  <div>运行占用</div>
                </el-col>
                <el-col :span="8">
                  <div class="title">CPU占用过高</div>
                  <div class="count">
                    <span style="color: #67c23a">360</span> 台设备
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="title">内存占用过高</div>
                  <div class="count">
                    <span style="color: #67c23a">360</span> 台设备
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row>
                <el-col :span="4">
                  <div>
                    <i class="el-icon-magic-stick" style="font-size: 50px; color: #409eff"></i>
                  </div>
                  <div>温度情况</div>
                </el-col>
                <el-col :span="8">
                  <div class="title">CPU温度过高</div>
                  <div class="count">
                    <span style="color: #67c23a">360</span> 台设备
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="title">硬盘温度过高</div>
                  <div class="count">
                    <span style="color: #67c23a">360</span> 台设备
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row style="margin-top: 10px">
                <el-col :span="4">
                  <div>
                    <i class="el-icon-pie-chart" style="font-size: 50px; color: #409eff"></i>
                  </div>
                  <div>存储资源</div>
                </el-col>
                <el-col :span="8">
                  <div class="title">系统盘占用过高</div>
                  <div class="count">
                    <span style="color: #67c23a">360</span> 台设备
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="title">磁盘总体占用过高</div>
                  <div class="count">
                    <span style="color: #67c23a">360</span> 台设备
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-row v-show="false" :gutter="8">
        <el-col :span="12">
          <el-card class="box-card" style="margin-top: 5px; height: 400px">
            <div style="font-weight: bold">设备统计</div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card" style="margin-top: 5px; height: 193px">
            <div style="font-weight: bold">实时网速</div>
          </el-card>
          <el-card class="box-card" style="margin-top: 5px; height: 193px">
            <div style="font-weight: bold">累计流量</div>
          </el-card>
        </el-col>
      </el-row>
      <el-card class="box-card yj" style="margin-top: 5px; height: 500px;">
        <span style="font-size:12px;color:#606266;mmargin-bottom:5px;"><strong>无聊时玩玩</strong></span>
        <iframe width="100%" height="500px" style="border:0px;" src="/static/game/index.html"></iframe>
      </el-card>
    </div>
  </div>
</template>

<script>
import ViewHead from "~/base/ViewHead.vue";

export default {
  name: "Basic",
  components: {
    ViewHead,
  },
  data() {
    return {
      days: 0,
      devOfflineCount: 0,
      devCount: 0,
      userCount: 0,
    };
  },
  methods: {
    getDays() {
      this.utils.http("get", "/webapi/welcome/days", {}, (resp) => {
        this.days = resp;
      });
    },
    getDevCount() {
      this.utils.http("get", "/webapi/welcome/count/info", {}, (resp) => {
        this.devCount = resp.deviceAllCount;
        this.devOfflineCount = resp.deviceAllOffline;
        this.userCount = resp.userCount;
      });
    },
  },
  mounted() {
    this.getDays();
    this.getDevCount();
  },
};
</script>

<style>
.basic-root {
  width: 100%;
  height: 100%;
}

.basic-root .view {
  padding: 0px 5px 10px 5px;
}

.basic-root .total .count {
  font-size: 18px;
  color: #606266;
  cursor: pointer;
}

.basic-root .total .title {
  font-size: 20px;
  color: #303133;
}

.basic-root .alarm {
  padding-top: 5px;
  font-size: 14px;
}

.basic-root .alarm .count {
  font-size: 16px;
  color: #606266;
  cursor: pointer;
  margin-top: 10px;
}

.basic-root .alarm .title {
  font-size: 18px;
  color: #303133;
}
</style>